<!--
****--@date     2024-02-01 11:34
  ****--@author   MGD
****--@describe 新增 编辑规则
-->
<template>
    <div class="MeetingListAdd">
      <el-scrollbar>
        <el-container>
          <el-aside width="20%" style="overflow-y: auto; height: calc(100vh - 200px);">
            <div class="col-field-box">
              <el-divider content-position="left">
                <div class="title">字段</div>
              </el-divider>
              <draggable
                item-key="key"
                v-model="arr1"
                :group="dragGroup"
                :disabled="dragBox"
                animation="300"
                drag-class="dragClass"
                ghost-class="ghostClass"
                chosen-class="chosenClass"
                @start="onStart"
                @end="onEnd"
                
              >
                <template #item="{element}">
                  <div>{{ element.value }}</div>
                </template>
                <!-- <transition-group>
                    <div v-for="(item,key) in arr1" :key="key" class="draggable-item">
                      {{ item.value }}
                    </div>
                  </transition-group> -->
              </draggable>
              <el-divider content-position="left">
                <div class="title">逻辑</div>
              </el-divider>
              <draggable
                item-key="key"
                v-model="arr3"
                :group="dragGroup"
                :disabled="dragBox"
                animation="300"
                drag-class="dragClass"
                ghost-class="ghostClass"
                chosen-class="chosenClass"
                
                @start="onStart"
                @end="onEnd"
              >
              <template #item="{element}">
                  <div>{{ element.value }}</div>
                </template>
  
                <!-- <transition-group>
                  <div v-for="(item, key) in arr3" :key="key" class="draggable-item">
                    {{ item.value }}
                  </div>
                </transition-group> -->
              </draggable>
              <el-divider content-position="left">
                <div class="title">扩展</div>
              </el-divider>
              <draggable
                v-model="extendVariableArr"
                :group="dragGroup"
                :disabled="dragBox"
                item-key="key"
                animation="300"
                drag-class="dragClass"
                ghost-class="ghostClass"
                chosen-class="chosenClass"
                @start="onStart"
                @end="onEnd"
                
              >
                <!-- <transition-group>
                  <div v-for="(item, key) in extendVariableArr" :key="key" class="draggable-item">
                    {{ item.value }}
                  </div>
                </transition-group> -->
                <template #item="{element}">
                  <div>{{ element.value }}</div>
                </template>
              </draggable>
              <div style="padding: 20px 0;">
                <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="60px">
                  <el-form-item label="key" prop="key">
                    <el-input v-model="ruleForm.key" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="value" prop="value">
                    <el-input v-model="ruleForm.value" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-refresh-right" @click="resetForm('ruleForm')">重置</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="submitForm('ruleForm')">保存</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-aside>
          <el-container>
            <el-main width="80%">
              <div class="rule-field-box">
                <el-divider content-position="left">
                  <div class="title">规则<span>（向左边拖入对应字段进行规则添加）</span></div>
                </el-divider>
                <draggable
                  item-key="key"
                  v-model="saveRuleArr"
                  group="sameDraggable"
                  animation="300"
                  drag-class="dragClass"
                  ghost-class="ghostClass"
                  chosen-class="chosenClass"
                  
                  :scroll="true"
                >
                <template #item="{element}">
                  <div>
                    {{ element.value }}
                    <div class="close-box" @click="handleDel(index)">
                        <i class="el-icon-error" />
                      </div>
                  
                  </div>
    
                </template>
                  <!-- <transition-group class="transition-box">
                    <div v-for="(item, index) in saveRuleArr" :key="index" class="rule-item">
                      {{ item.value }}
                      <div class="close-box" @click="handleDel(index)">
                        <i class="el-icon-error" />
                      </div>
                    </div>
                  </transition-group> -->
                  
                </draggable>
                <div v-if="!saveRuleArr.length" class="empty-box">
                  <el-empty :image-size="150" description="向左边拖入对应字段进行规则添加" />
                </div>
              </div>
            </el-main>
            <el-footer>
              <div class="button-box">
                <el-button class="resetting" type="danger" icon="el-icon-refresh-right" @click="saveRuleArr = []">重置</el-button>
                <el-button
                  class="submit"
                  type="primary"
                  icon="el-icon-edit-outline"
                  :loading="buttonLoading"
                  :disabled="!saveRuleArr.length"
                  @click="handleSave()"
                  >保存</el-button
                >
              </div>
            </el-footer>
          </el-container>
        </el-container>
      </el-scrollbar>
    </div>
  </template>
  
  <script>
  import Draggable from "vuedraggable";
  export default {
    name: "MeetingListAdd",
    components: { Draggable },
    mixins: [],
    data() {
      return {
        buttonLoading: false,
        dragBox: false,
        dragGroup: {
          name: "sameDraggable",
          put: false, // true|false|array|function,//是否允许拖入当前组
          pull: "clone", // true|false| 'clone'|array|function,//是否允许拖出当前组
        },
        ruleForm: {
          value: "",
          key: "",
        },
        rules: {
          value: [{ required: true, message: "请输入", trigger: "blur" }],
          key: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        // 定义要被拖拽对象的数组
        arr1: [
          { key: 1, value: "字段1" },
          { key: 2, value: "字段2" },
          { key: 3, value: "字段3" },
          { key: 4, value: "字段4" },
          { key: 5, value: "字段5" },
        ],
        arr3: [
          { key: 1, value: "且" },
          { key: 2, value: "或" },
          { key: 3, value: "非" },
          { key: 4, value: ">" },
          { key: 5, value: "<" },
          { key: 6, value: "=" },
          { key: 7, value: "包含" },
          { key: 8, value: "不包含" },
        ],
        extendVariableArr: [], // 扩展变量
        saveRuleArr: [], // 规则空数组
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      // 开始拖拽事件
      onStart() {
        console.log("=========拖拽开始========");
        this.dragBox = true;
      },
      // 拖拽结束事件
      onEnd() {
        console.log("=======拖拽结束==========");
        this.dragBox = false;
      },
      // 删除
      handleDel(index) {
        this.saveRuleArr.splice(index, 1);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const submitInfo = JSON.parse(JSON.stringify(this.ruleForm));
            this.extendVariableArr.push(submitInfo);
            this.resetForm(formName);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 保存
      handleSave() {
        console.log(this.saveRuleArr, "==============================规则数据");
      },
    },
  };
  </script>
  
  <style lang="scss">
  .MeetingListAdd {
    height: 100%;
    padding: 20px;
    .el-scrollbar {
      height: 100%;
      width: 100%;
      overflow-x: hidden;
  
      .el-scrollbar__view {
        overflow-x: hidden;
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    /*定义要拖拽元素的样式*/
    .ghostClass {
      display: inline-block;
      background-color: #cce4ff !important;
    }
  
    .chosenClass {
      padding: 12px;
      color: #fff;
      display: inline-block;
      background-color: #7eb8ff !important;
      opacity: 1 !important;
    }
  
    .dragClass {
      padding: 6px 12px !important;
      display: inline-block;
      background-color: #cce4ff !important;
      opacity: 1 !important;
      box-shadow: none !important;
      outline: none !important;
      background-image: none !important;
      border-radius: 0 !important;
    }
  
    .col-field-box {
      .title {
        padding: 12px 0;
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      .draggable-item {
        min-width: 60px;
        text-align: center;
        margin: 0 8px 8px;
        padding: 6px 12px;
        display: inline-block;
        border-radius: 20px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        background: linear-gradient(180deg, rgb(107, 145, 218) 0%, rgba(24, 144, 242, 1) 100%);
        box-shadow: inset 2px 0 18px rgba(107, 145, 218, 1), inset 0 5px 10px rgba(247, 247, 247, 1);
      }
      .draggable-item:hover {
        background-color: #fdfdfd;
        cursor: move;
      }
  
      .draggable-item + .draggable-item {
        border-top: none;
        margin-top: 6px;
      }
    }
  
    .rule-field-box {
      position: relative;
      height: calc(100vh - 300px);
      padding: 0 12px;
      border-radius: 20px;
      .title {
        padding: 12px 0;
        font-size: 18px;
        font-weight: bold;
        color: #333;
        span {
          font-weight: normal;
          font-size: 14px;
          color: #fa8c1e;
        }
      }
      .transition-box {
        padding: 12px;
        display: block;
        height: 60vh;
        background: #2b2b2b;
        border-radius: 12px;
        overflow-y: auto;
      }
      .empty-box {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-empty__description p {
          color: #eee;
          font-size: 16px;
        }
      }
      .rule-item {
        min-width: 35px;
        text-align: center;
        position: relative;
        font-size: 16px;
        display: inline-block;
        padding: 12px 4px;
        color: #fff;
        background: #323232;
        flex-wrap: wrap;
        .close-box {
          display: none;
          position: absolute;
          top: -5px;
          right: -5px;
          cursor: pointer;
        }
      }
      .rule-item:hover .close-box {
        display: inline-block;
        z-index: 1;
      }
      .rule-item:hover {
        background-color: #6b6b6b;
        cursor: move;
      }
      .rule-item + .rule-item {
        border-top: none;
        margin-top: 6px;
      }
    }
    .button-box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      .resetting,
      .submit {
        padding: 12px 0;
        font-size: 18px;
        width: 160px;
        border-radius: 6px;
        border: none;
        background: #2482ed;
      }
      .resetting {
        background: #fff;
        color: #2482ed;
        border: 1px solid #2482ed;
      }
    }
  }
  </style>
  